<template>
  <div class="main">
    <el-breadcrumb separator="-->">
      <el-breadcrumb-item :to="{ path: '/user/center' }">我的账户</el-breadcrumb-item>
      <el-breadcrumb-item>用户资料</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- <el-card> 个人信息详细 </el-card> -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户资料</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="visible = true">更新资料</el-button>
      </div>
      <!-- 资料区 -->
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item label="用户ID">{{ List.uid }}</el-descriptions-item>
        <el-descriptions-item label="用户名">{{ List.account }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ List.tel }}</el-descriptions-item>
        <el-descriptions-item label="居住地" :span="2">{{ (List.site || '').slice(3, 6) }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">{{ List.remarks ? List.remarks : '无' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址">{{ List.site }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 修改资料弹层 -->
    <el-dialog title="更新资料" :visible.sync="visible" width="30%">
      <el-form status-icon label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名">
          <el-input type="text" autocomplete="off" v-model="updateList.account"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input type="text" autocomplete="off" v-model="updateList.phone"></el-input>
        </el-form-item>
        <el-form-item label="旧密码">
          <el-input type="password" autocomplete="off" v-model="updateList.oldPwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input type="password" autocomplete="off" v-model="updateList.newPwd"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="updateData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getUserInfo, updateUserInfo } from '@/api/user'
export default {
  name: 'UserInfo',
  data() {
    return {
      List: {},
      // 修改资料弹层显示与隐藏
      visible: false,
      // 修改资料
      updateList: {
        account: '',
        phone: '',
        oldPwd: '',
        newPwd: '',
      },
    }
  },
  created() {
    // this.uid = this.$store.state.user.uid
    this.initUserInfo()
  },
  methods: {
    async updateData() {
      const uid = this.$store.state.user.uid
      const res = await updateUserInfo({ ...this.updateList, uid })
      if (res.status != 0) return this.$message.error('更新失败！')
      this.$message.success('更新成功！')

      this.visible = false
      this.updateList.account = ''
      this.updateList.phone = ''
      this.updateList.oldPwd = ''
      this.updateList.newPwd = ''
      this.initUserInfo()
    },
    initUserInfo() {
      const uid = this.$store.state.user.uid
      getUserInfo({ uid }).then((result) => {
        // console.log('result', result.data)
        this.List = result.data[0]
      })
    },
  },
}
</script>

<style scoped lang="less">
.main {
  // height: 1000px;
  .el-breadcrumb {
    margin-top: 20px;
  }
  .el-card {
    margin-top: 20px;
    height: 750px;
  }
  .el-form {
    margin-top: 50px;
  }
  .anquan-title {
    margin-top: 30px;
  }
}
</style>
